import React, { PureComponent } from "react";
import { Row, Col, Divider } from "antd";
import "antd/dist/antd.css";
import virtualdatas from "../common/virtualdatas";
export default class Footer extends PureComponent {
  render() {
    return (
      <div
        id="footer"
        style={{
          background: "#ffffff",
          paddingTop: 20,
          paddingBottom: 20,
          marginTop: 20
        }}
      >
        <Row type="flex" justify="center">
          <Col span={16}>
            <div style={{ display: "flex", flexDirection: "row" }}>
              {virtualdatas.footers.map((item, index) => (
                <FooterItem data={item} key={index} />
              ))}
            </div>
          </Col>
          <Col span={4}>
            <div>
              <img
                alt=""
                style={{ width: "50%" }}
                src={require("../imgs/jf.png")}
              />
            </div>
          </Col>
        </Row>
        <Divider />
        <div style={{ textAlign: "center" }}>
          <span>
            版权所有©2018-03-16&nbsp;&nbsp;&nbsp;备案号:420324199506131013
          </span>
        </div>
      </div>
    );
  }
}
class FooterItem extends PureComponent {
  render() {
    const { data } = this.props;
    return (
      <div
        style={{
          flex: 1,
          display: "flex",
          flexDirection: "column",
          alignItems: "center"
        }}
      >
        <h3 style={{ color: "#475669" }}>{data.title}</h3>
        {data.items.map((item, index) => (
          <a key={index} style={{ color: "#475669" }}>
            {item.name}
          </a>
        ))}
      </div>
    );
  }
}
